<template>
    <el-container class="base_fund_account_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="toolbar_buttons"
                                :toolbar_filter="toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleEvent">
                    <template slot="right_search"></template>
                </headerTemplate>
                <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                  @event="handleTableEvent" />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import provide from "@common/mixins/provide";
import FundAccountForm from "../dialog/FundAccountForm";

export default {
    extends: provide,
    name: "BaseFundAccount",
    data() {
        let _this = this;
        return {
            toolbar_buttons: [
                {
                    id: "refresh",
                    icon: "fa fa-refresh",
                    show: true,
                    method: () => {
                        _this.getList(true);
                    },
                },
                {
                    id: "add",
                    type: "primary",
                    icon: "fa fa-plus",
                    show: true,
                    permission: "base:fundAccount:save",
                    method: () => {
                        _this.openDialog("add", null);
                    },
                },
                {
                    id: "edit",
                    type: "success",
                    icon: "fa fa-pencil",
                    show: true,
                    permission: "base:fundAccount:save",
                    method: () => {
                        _this.openDialog("edit", null);
                    },
                },
                {
                    id: "del",
                    type: "danger",
                    icon: "fa fa-trash-o",
                    show: true,
                    permission: "base:fundAccount:delete",
                    method: () => {
                        _this.confirmDel();
                    },
                },
            ],
            toolbar_filter: [
                { type: "text", field: "name", label: "资金账号名称" },
                { type: "text", field: "bank_name", label: "银行名称" },
                { type: "text", field: "bank_account", label: "银行账号" },
                { type: "text", field: "account_name", label: "开户名" },
                { type: "text", field: "subject_code", label: "科目代码" },
            ],
            searchForm: {},
            tableOptions: {
                ref: "baseFundAccountTable",
                container: ".base_fund_account_container",
                multiSelect: true,
                columns: [
                    {
                        label: "账号名称",
                        prop: "name",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "科目代码",
                        prop: "subject_code",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "账号类型",
                        prop: "account_type",
                        align: "center",
                        formatter(row) {
                            if (_this.$utils.isNotEmpty(row.account_type)) {
                                return row.account_type === 2 ? '银行' : '现金';
                            }
                            return '';
                        },
                        width: 90,
                    },
                    {
                        label: "银行名称",
                        prop: "bank_name",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "银行账号",
                        prop: "bank_account",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "开户名",
                        prop: "account_name",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "期初金额",
                        prop: "init_amount",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "期初日期",
                        prop: "init_date",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "当前金额",
                        prop: "amount",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "备注",
                        prop: "note_info",
                        align: "center",
                        minWidth: 120,
                    },
                ],
                operates: {
                    fixed: "right",
                    list: [
                        {
                            id: "edit",
                            icon: "fa fa-pencil",
                            type: "success",
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            permission: "base:fundAccount:save",
                            method: (key, row, index) => {
                                _this.openDialog("edit", row);
                            },
                        },
                        {
                            id: "info",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            tooltip: {
                                content: "删除",
                            },
                            permission: "base:fundAccount:delete",
                            show: true,
                            method: (key, row, index) => {
                                _this.confirmDel(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: window.configs.pageSize,
                },
            },
            dataList: [],
            selectionList: [],
        };
    },
    mounted() {
        this.getList(true);
    },
    methods: {
        // 接收搜索条件
        handleEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        // 获取列表
        getList(search) {
            const _this = this;
            _this.dataList = [];
            if (search) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            queryData.owner_sid = -1;
            _this.fetchData(_this.$api.API_FindBaseFundAccounts, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        openDialog(type, row) {
            const _this = this;
            let title = type === "add" ? "创建资金账号" : "编辑资金账号";
            let deepRow = Object.assign({}, row);
            if (!row) {
                if (type === 'add') {
                    deepRow = {};
                }
                if (type === 'edit') {
                    if (!_this.checkSelection(_this.selectionList)) {
                        return;
                    }
                    deepRow = $.extend({}, _this.selectionList[0]);
                }
            }
            _this.$dialog({
                title: title,
                width: '600px',
                component: {
                    value: FundAccountForm,
                    props: {
                        options: {
                            type,
                            row: deepRow,
                        },
                    },
                },
                confirmed() {
                    _this.getList(true);
                },
            });
        },
        // 确认删除用户
        confirmDel(row) {
            let _this = this;
            let sids = [];
            if (!row) {
                if (!_this.checkSelection(_this.selectionList)) {
                    return;
                }
                sids = _this.selectionList.map(item => item.sid);
            } else {
                sids.push(row.sid);
            }
            _this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                _this.fetchData(_this.$api.API_DeleteBaseFundAccounts, {sids: sids}).then(result => {
                    _this.getList(true);
                    _this.$message.success("删除成功");
                }).catch(() => {
                });
            }).catch(() => {
            });
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.base_fund_account_container {
    /deep/ .import {
        background-color: #67C23A;
        border-color: #67C23A;
        color: #fff;
    }

    /deep/ .export {
        background-color: #E6A23C;
        border-color: #E6A23C;
        color: #fff;
    }
}
</style>
